<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Advance Nested grids demo</title>
  <link rel="stylesheet" href="demo.css"/>
  <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/> <!-- required for [2-11] column of sub-grids -->
  <!-- test using CSS rather than minRow -->
  <style type="text/css">
    .container-fluid > .grid-stack { min-height: 250px}
  </style>
  <script src="../dist/gridstack-all.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>Advanced Nested grids demo</h1>
    <p>Create sub-grids (darker background) on the fly, by dragging items completely over others (nest) vs partially (push) using
      the new v7 API <code>GridStackOptions.subGridDynamic=true</code></p>
    <p>This will use the new delay drag&drop option <code>DDDragOpt.pause</code> to tell the gesture difference</p>
    <p>Note: <code>gridstack-extra.min.css</code> is required for [2-11] column of sub-grids</p>
    <a class="btn btn-primary" onClick="addMainWidget()" href="#">Add Widget</a>
    <a class="btn btn-primary" onClick="addNewWidget(0)" href="#">Add W Grid0</a>
    <a class="btn btn-primary" onClick="addNewWidget(1)" href="#">Add W Grid1</a>
    <a class="btn btn-primary" onClick="addNewWidget(2)" href="#">Add W Grid2</a>
    <span>entire option+layout:</span>
    <a class="btn btn-primary" onClick="save()" href="#">Save Full</a>
    <a class="btn btn-primary" onClick="destroy()" href="#">Destroy</a>
    <a class="btn btn-primary" onClick="load()" href="#">Re-create</a>
    <span>layout list:</span>
    <a class="btn btn-primary" onClick="save(true, false)" href="#">Save layout</a>
    <a class="btn btn-primary" onClick="save(false, false)" href="#">Save layout no content</a>
    <a class="btn btn-primary" onClick="destroy(false)" href="#">Clear</a>
    <a class="btn btn-primary" onClick="load(false)" href="#">Load</a>
    <br><br>
    <!-- grid will be added here -->
  </div>
  <p>Output</p>
  <textarea id="saved" style="width:100%; height:200px;"></textarea>
  <script type="text/javascript">
    let subOptions = {
      cellHeight: 50, // should be 50 - top/bottom
      column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
      acceptWidgets: true, // will accept .grid-stack-item by default
      margin: 5,
      subGridDynamic: true, // make it recursive for all future sub-grids
    };
    let main = [{x:0, y:0}, {x:0, y:1}, {x:1, y:0}]
    let sub1 = [{x:0, y:0}];
    let sub0 = [{x:0, y:0}, {x:1, y:0}];
    // let sub0 = [{x:0, y:0}, {x:1, y:0}, {x:1, y:1, h:2, subGridOpts: {children: sub1, ...subOptions}}];
    let options = { // main grid options
      cellHeight: 50,
      margin: 5,
      minRow: 2, // don't collapse when empty
      acceptWidgets: true,
      subGridOpts: subOptions,
      subGridDynamic: true, // v7 api to create sub-grids on the fly
      children: [
        ...main,
        {x:2, y:0, w:2, h:3, id: 'sub0', subGridOpts: {children: sub0, ...subOptions}},
        {x:4, y:0, h:2, id: 'sub1', subGridOpts: {children: sub1, ...subOptions}},
        // {x:2, y:0, w:2, h:3, subGridOpts: {children: [...sub1, {x:0, y:1, subGridOpts: subOptions}], ...subOptions}/*,content: "<div>nested grid here</div>"*/},
      ]
    };
    let count = 0;
    // create unique ids+content so we can incrementally load() and not re-create anything (updates)
    [...main, ...sub0, ...sub1].forEach(d => d.id = d.content = String(count++));

    // create and load it all from JSON above
    document.querySelector('#saved').value = JSON.stringify(options);
    let grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);

    function addMainWidget() {
      grid.addWidget({x:0, y:100, content:"new item"});
    }

    function addNewWidget(i) {
      let subGrid = document.querySelectorAll('.grid-stack-nested')[i]?.gridstack;
      if (!subGrid) return;
      let node = {
        // x: Math.round(6 * Math.random()),
        // y: Math.round(5 * Math.random()),
        // w: Math.round(1 + 1 * Math.random()),
        // h: Math.round(1 + 1 * Math.random()),
        content: String(count++)
      };
      subGrid.addWidget(node);
      return false;
    };

    function save(content = true, full = true) {
      options = grid?.save(content, full);
      console.log(options);
      document.querySelector('#saved').value = JSON.stringify(options);
    }
    function destroy(full = true) {
      if (!grid) return;
      if (full) {
        grid.destroy();
        grid = undefined;
      } else {
        grid.removeAll();
      }
    }
    function load(full = true) {
      // destroy(full); // in case user didn't call
      if (full || !grid) {
        grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
      } else {
        grid.load(options);
      }
    }

    // save(true, false); load(false); // TESTing
  </script>
</body>
</html>
